<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DataTbaleStudy</title>

    <!-- DataTables CSS -->
    <!--<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.css">-->
    <link rel="stylesheet" href="css/frame/jquery.dataTables.css">
    <link rel="stylesheet" href="css/frame/bootstrap.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
    <!-- jQuery -->
    <!--<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>-->
    <script src="js/frame/jquery-3.2.0.js"></script>
    <!-- DataTables -->
    <!--<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>-->
    <script src="js/frame/jquery.dataTables.js"></script>
    <script src="js/frame/bootstrap.js"></script>
  </head>

  <body>
    <div class="container">
      <div class="domab">
        <div class="" style="float:right;">
          <label>模糊查询：
            <input type="text" class="dsearch" placeholder="" aria-controls="example">
          </label>
        </div>
        <button id="button" class="float-left">删除选中的行</button>
        <div class="float-left" style="float:left; position:relative; z-index:9999;height:100%;">
          <button class="showcol">列段显示/隐藏</button>
          <ul class="showul">

            <!--<li>
              <input type="checkbox" clas="toggle-vis" data-column="2" />服务器名称
            </li>-->

            <li>
              <input type="checkbox" class="toggle-vis" data-column="2" />始发站
            </li>

            <li>
              <input type="checkbox" class="toggle-vis" data-column="3" />目的地
            </li>

            <li>
              <input type="checkbox" class="toggle-vis" data-column="4" />售票数
            </li>

            <li>
              <input type="checkbox" class="toggle-vis" data-column="5" />日期
            </li>

            <li>
              <input type="checkbox" class="toggle-vis" data-column="6" />金额
            </li>
          </ul>
        </div>

        <div style="clear:both;"></div>
      </div>
      <div class="wt100">

        <table id="example" class="display" cellspacing="0" width="100%">

          <thead>

            <tr>
              <th style=" width:1px; padding:0">编号</th>
              <th style="width:30px; padding:10px 0 10px 10px">
                <input type="checkbox" id="checkAll">
              </th>

              <th>始发站</th>

              <th>目的地</th>

              <th>售票</th>

              <th>日期</th>

              <th>金额</th>

              <!--<th>状态</th>-->
            </tr>
          </thead>
          <tbody>

            <tr>
              <td></td>
              <td>
                <input type="checkbox" name="checkList">
              </td>
              <td>
                太原
              </td>
              <td>石家庄</td>
              <td>3000</td>
              <td>2017/04/21</td>
              <td>8000</td>
            </tr>

            <tr>
              <td></td>
              <td>
                <input type="checkbox" name="checkList">
              </td>
              <td>
                太原
              </td>
              <td>银川</td>
              <td>3000</td>
              <td>2017/04/21</td>
              <td>8000</td>
            </tr>

            <tr>
              <td></td>
              <td>
                <input type="checkbox" name="checkList">
              </td>
              <td>
                太原
              </td>
              <td>大同</td>
              <td>3000</td>
              <td>2017/04/21</td>
              <td>8000</td>
            </tr>

            <tr>
              <td></td>
              <td>
                <input type="checkbox" name="checkList">
              </td>
              <td>
                太原
              </td>
              <td>吕梁</td>
              <td>3000</td>
              <td>2017/04/21</td>
              <td>8000</td>
            </tr>

            <tr>
              <td></td>
              <td>
                <input type="checkbox" name="checkList">
              </td>
              <td>
                太原
              </td>
              <td>临汾</td>
              <td>3000</td>
              <td>2017/04/21</td>
              <td>8000</td>
            </tr>

            <tr>
              <td></td>
              <td>
                <input type="checkbox" name="checkList">
              </td>
              <td>
                太原
              </td>
              <td>运城</td>
              <td>3000</td>
              <td>2017/04/21</td>
              <td>8000</td>
            </tr>

            <tr>
              <td></td>
              <td>
                <input type="checkbox" name="checkList">
              </td>
              <td>
                太原
              </td>
              <td>长治</td>
              <td>3000</td>
              <td>2017/04/21</td>
              <td>8000</td>
            </tr>

            <tr>
              <td></td>
              <td>
                <input type="checkbox" name="checkList">
              </td>
              <td>
                太原
              </td>
              <td>阳泉</td>
              <td>3000</td>
              <td>2017/04/21</td>
              <td>8000</td>
            </tr>

            <tr>
              <td></td>
              <td>
                <input type="checkbox" name="checkList">
              </td>
              <td>
                太原
              </td>
              <td>晋城</td>
              <td>3000</td>
              <td>2017/04/21</td>
              <td>8000</td>
            </tr>

            <tr>
              <td></td>
              <td>
                <input type="checkbox" name="checkList">
              </td>
              <td>
                太原
              </td>
              <td>晋中</td>
              <td>3000</td>
              <td>2017/04/21</td>
              <td>8000</td>
            </tr>

            <tr>
              <td></td>
              <td>
                <input type="checkbox" name="checkList">
              </td>
              <td>
                太原
              </td>
              <td>朔州</td>
              <td>3000</td>
              <td>2017/04/21</td>
              <td>8000</td>
            </tr>

          </tbody>
          <tfoot>
            <tr>
              <th></th>
              <th></th>
              <th></th>
              <th></th>
              <th><span>总计:</span></th>
              <th>
              </th>
              <th><span>总额:</span></th>
            </tr>
          </tfoot>
        </table>

        <!--<div class="showslider">
          <button class="closediv">关闭</button>
        </div>-->

        <style>

        </style>
      </div>
      <script src="js/index.js"></script>
    </div>
  </body>

</html>